<template>
  <!-- 购物车页面 -->
  <div class="carPage">
    <!-- 头部栏 -->
    <!-- <header>
      <i class="iconfont iconfont-fanhui"></i>
      <span>购物车</span>
      <i class="iconfont iconfont-gengduo1"></i>
    </header> -->
    <z-header>我的知心购</z-header>

    <!-- 购物车的列表栏 -->
    <!-- <div class="shopcar-container">
      <van-swipe-cell>
        <div class="shopcart-box">
          <van-checkbox
            v-model="checked"
            checked-color="#F63515"
          ></van-checkbox>
          <img
            src="http://img.happymmall.com/983c4003-7ee0-4669-b8ff-e620ef62ede7.jpg"
          />
          <div class="shopcart-item-info">
            <p class="shopcart-name">
              Apple iPhone X (A1865) 64GB 深空灰色 移动联通电信4G手机
            </p>
            <p class="shopcart-subtitle">仅售4999!!</p>
            <div class="shopcart-stepper">
              <span class="shopcart-price">￥3999</span>
              <van-stepper v-model="value" min="5" max="8" />
            </div>
          </div>
        </div>
        <template slot="right">
          <van-button square type="danger" text="删除" />
        </template>
      </van-swipe-cell>
    </div> -->
    <!-- <div class="content-list">
      <div class="radio">
        <input type="Checkbox" />
      </div>
      <div class="img">
        <img
          src="http://img.happymmall.com/570186f3-c0d2-4336-a1b7-3e1aff88f73a.jpg"
          alt=""
        />
      </div>
      <div class="content-title">
        <p class="title">
          Apple iPhone X (A1865) 64GB 深空灰色 移动联通电信4G手机
        </p>
        <p class="subtitle">九成新</p>
        <div class="stepper">
          <div class="shopcart-price">￥<span>8896</span></div>
          <div class="vant-stepper">
            <button>-</button>
            <input type="text" value="1" />
            <button>+</button>
          </div>
        </div>
      </div>
    </div>
    <div class="content-list">
      <div class="radio">
        <input type="Checkbox" />
      </div>
      <div class="img">
        <img
          src="http://img.happymmall.com/570186f3-c0d2-4336-a1b7-3e1aff88f73a.jpg"
          alt=""
        />
      </div>
      <div class="content-title">
        <p class="title">
          Apple iPhone X (A1865) 64GB 深空灰色 移动联通电信4G手机
        </p>
        <p class="subtitle">九成新</p>
        <div class="stepper">
          <div class="shopcart-price">￥<span>8896</span></div>
          <div class="vant-stepper">
            <button>-</button>
            <input type="text" value="1" />
            <button>+</button>
          </div>
        </div>
      </div>
    </div> -->

    <shopcart :carList="carList" @handDelCarItem="handDelCarItem" @calculateCount="calculateCount"></shopcart>

    <!-- 为你推荐列表 -->
    <recommend></recommend>

    <!-- 提交订单组件 -->
    <van-submit-bar class="orderName" :price="totalPrice" button-text="提交订单" @submit="onSubmit">
      <!-- 通过单向绑定值， 事件修改值 -->
      <van-checkbox @click="allCheckedClick" :value="allChecked">全选</van-checkbox>
    </van-submit-bar>

    <!-- 底部标签导航栏 -->
    <tabBar></tabBar>
  </div>
</template>

<script>
import tabBar from "@/components/tabBar.vue";
import shopcart from "./components/shopcarCells.vue";
import zHeader from "@/components/common/z-header.vue";
// 为你推荐
import recommend from "@/components/common/recommend.vue"

// import { getCartList } from "../../api"
// 辅助函数  解构出 全选框的状态
import { delCar, carAdd } from "@/api"
import { mapState } from "vuex";
export default {
  data() {
    return {
      checked: false,
      value: 1,
    };
  },
  computed: {
    ...mapState(["carList"]),
    // 计算属性，当state中的数据发生变化时，会重新计算
    ...mapState(['allChecked']),
    ...mapState(['totalPrice'])
  },
  components: {
    tabBar,
    shopcart,
    zHeader,
    recommend
  },
  created() {
    // 获取存放在vuex中的购物车数据
    this.$store.dispatch("getCarData");
    // this.carList = this.$store.getters.getCarData
    // 将vuex中的state属性解构到计算属性中
    // this.carList = this.carData

    
  },
  methods: {
    // 提交订单动作
    onSubmit() {
      this.$toast.fail('提交订单模块还未实现')
    },
    // 全选事件绑定
    allCheckedClick() {
      // 直返 全选按钮的  选中状态
      // console.log(this.allChecked);
      let checked = this.allChecked
      this.$store.commit('setAllChecked', !checked)
      // 将所有选择框置为  相同状态   !this.allChecked
      // 同时也计算了总价格
      this.$store.dispatch('oppositeAll', !checked)

      // 当全选按钮为  true的时候，计算所有商品的价格
    },

    // 从购物车中 删除数据
    handDelCarItem(itemId) {
      delCar({id: itemId}, res => {
        console.log(res);
        this.$store.dispatch("getCarData");
      })
    },
    // 从购物车中减少商品数量
    calculateCount(params) {
      // 单一功能组件，尽量不要进行网络请求
      // console.log(params);
      carAdd(params, res => {
        console.log(res);
        // 成功后，设置数量属性
        if (res.status == 0) {
          this.$store.commit('setBadgeCount', this.$store.getters.getBadgeCount + params.count)
          // 点击加减号后， 价格没有实时刷新，得触发一下计算价格方法
          this.$store.dispatch('changeChecked')
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../../common/style/mixin";
.carPage {
  background-color: #f7f7f7;
}
p {
  margin: 0;
}
header {
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  font-size: 30px;
  background-color: #f7f7f7;
  .iconfont {
    font-size: 35px;
  }
}
.content-list:nth-child(2) {
  margin-top: 80px;
}
.content-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  margin: 20px 0;
  //   margin-top: 20px;
  .radio input {
    width: 35px;
    height: 35px;
    background-color: #ffffff;
    border: solid 1px #dddddd;
    border-radius: 50%;
  }
  .img img {
    width: 170px;
    height: 170px;
    margin: 0 3px;
  }
  .content-title {
    font-size: 26px;
  }
  .subtitle {
    font-size: 22px;
    height: 70px;
    color: #ccc;
  }
  .stepper {
    display: flex;
    justify-content: space-between;
    .shopcart-price {
      color: red;
    }
    .vant-stepper {
      input {
        // display: inline;
        width: 40px;
        margin: 0 5px;
      }
    }
  }
}
.shopcar-container {
  // margin-top: 80px;
  padding-top: 90px;
  .shopcart-box {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 10px;
    margin: 10px 0;
    height: 200px;

    img {
      width: 180px;
      height: 180px;
      margin: 0 10px;
    }

    .shopcart-item-info {
      display: flex;
      flex: 70%;
      flex-direction: column;
      justify-content: space-between;

      .shopcart-name {
        height: 70px;
        font-size: 26px;
        overflow: hidden;
      }

      .shopcart-subtitle {
        font-size: 24px;
        color: #999;
      }

      .shopcart-stepper {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .shopcart-price {
          font-size: 30px;
          color: $red;
        }
      }
    }
  }
  .van-button {
    height: 200px;
  }
}
</style>
<style>
.orderName {
  margin-bottom: 120px;
}
.recommend-list {
  margin-bottom: 80px;
}
</style>